<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" type="image/x-icon" href="images/ico.jpg" />
		<link rel="stylesheet" type="text/css" href="css/baidu-mobile.css" />
		<link rel="stylesheet" type="text/css" href="css/baidu-pc.css" />
		<title>百度首页</title>
	</head>

	<body>

		<div class="mobile">
			<!-- 顶部 -->
			<header>
				<div class="nav-left">
					<div class="weather-icon"><img src="images/yun.png"></div>
					<div class="weather-num">22°</div>
					<div class="weather-status">
						<p>广州</p>
						<p>空气&nbsp;48</p>
					</div>
				</div>
				<div class="nav-right">
					<a id="login" class="icon-login"><img src="images/ren.png"></a>
				</div>

			</header>
			<!-- 顶部 -->

			<!-- 中间内容区域 -->
			<article>

				<div class="content">
					<img src="http://m.baidu.com/static/index/plus/plus_logo.png" alt="百度一下,你就知道">
					<form action="#" method="post">
						<input type="text" class="input_text" required="required" />
						<input type="button" value="百度一下" class="btn_baidu" />
					</form>
				</div>
				<!-- 网站导航 -->
				<div class="my-nav">
					<ul>
						<li>
							<a href=""> <img src="images/xinwen.png"> <br/>新闻</a>
						</li>
						<li>
							<a href=""> <img src="images/xiaoshuo.png"> <br/>小说</a>
						</li>
						<li>
							<a href=""> <img src="images/shipin.png"> <br/>视频</a>
						</li>
						<li>
							<a href=""> <img src="images/nuomi.png"> <br/>糯米</a>
						</li>
						<li>
							<a href=""> <img src="images/ditu.png"> <br/>地图</a>
						</li>
						<li>
							<a href=""> <img src="images/gengduo.png"> <br/>更多</a>
						</li>
					</ul>
				</div>

				<!-- 常用网站 -->
				<div class="puls">
					<div class="puls-title">
						常用网址
					</div>
					<ul>
						<li><a href="">资讯</a></li>
						<li><a href="">hao123</a></li>
						<li><a href="">图片</a></li>
						<li><a href="">爱奇艺</a></li>
						<li><a href="">美女</a></li>
						<li><a href="">音乐</a></li>
						<li><a href="">电影</a></li>
						<li><a href="">笑话</a></li>
					</ul>
				</div>

			</article>
			<!-- 中间内容区域 -->

			<!-- 底部网站信息 -->
			<footer>
				意见反馈<br/>©2016 Baidu 使用百度前必读 京ICP证030173号
			</footer>

			<!-- 底部网站信息 -->
		</div>

		<!-- 电脑网站 -->
		<div class="pc">
			<!-- 顶部右边导航栏 -->
			<nav>

				<ul>
					<li><a href="#"><b>糯米</b></a></li>
					<li><a href="#"><b>地图</b></a></li>
					<li><a href="#"><b>hao123</b></a></li>
					<li><a href="#"><b>地图</b></a></li>
					<li><a href="#"><b>视频</b></a></li>
					<li><a href="#"><b>贴吧</b></a></li>
					<li><a href="#"><b>登录</b></a></li>
					<li><a href="#"><b>设置</b></a></li>
					<li><input type="button" value="更多产品" class="more_product" /></li>
				</ul>

			</nav>

			<!-- 顶部右边导航栏 -->

			<!-- 中间内容区域 -->
			<article>

				<img src="images/bd_logo1.png">

				<form action="#" method="post">
					<input type="text" class="input_text" required="required" />
					<input type="button" value="百度一下" class="btn_baidu" />
				</form>

			</article>
			<!-- 中间内容区域 -->

			<!-- 底部网站信息 -->
			<footer>
				©2016 Baidu 使用百度前必读 意见反馈 京ICP证030173号
			</footer>

			<!-- 底部网站信息 -->
		</div>

	</body>

</html>